<template>
  <div>
    <page-list
      :x-uri="uri"
      :custom-components="custom"
      x-tabs="custom"
      :tree="true"
      :lazy="true"
      :lazy-fun="loadChild"
      :doactions="doactions"
      :checkbox-item="false"
    >
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button
          v-auth="'site.pc.navi.bottom.add'"
          size="mini"
          type="primary"
          @click="createGroup"
        >新建导航分组</el-button>
      </template>
    </page-list>
    <el-dialog
      title="请输入分组名称"
      :visible.sync="dialogVisible"
      width="400px"
      :close-on-click-modal="false"
      top="30vh"
    >
      <el-form v-if="dialogVisible" ref="category" :model="category">
        <el-form-item prop="title" :rules="rulesTtitle" size="small">
          <edu-input key="title" :value.sync="category.title" :args="{ minlength: 2, maxlength: 30 }" />
        </el-form-item>
        <el-form-item size="small">
          <el-row type="flex" justify="end">
            <el-button @click="resetForm" v-text="resetText" />
            <el-button type="primary" :disabled="disableSubmit" @click="onSubmit">保存</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <sort-dialog :value.sync="sortValue" :visible.sync="visible" :disable-submit="disableSubmit" @submit="onSubmitSort" />
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue'
import EduInput from '@public/form/input.vue'
import Content from './components/content.vue'
import Tabs from '../tabs.vue'
import SortDialog from '@/components/update-sort-dialog';

export default {
  components: {
    PageList,
    EduInput,
    Tabs,
    SortDialog
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/admin/site/navi/bottom/list',
      doactions: [
        {
          title: '添加导航',
          meta: { permission: 'site.pc.navi.bottom.add' },
          display: function({ row }) {
            return row.pid == 0
          },
          callback: this.create
        },
        { title: '排序', meta: { permission: 'site.pc.navi.bottom.sort' }, callback: this.sortPopover },
        {
          title: '编辑',
          meta: { permission: 'site.pc.navi.bottom.edit' },
          callback: this.edit
        },
        { title: '删除', meta: { permission: 'site.pc.navi.bottom.del' }, callback: this.delete }
      ],
      custom: {
        content: Content
      },
      dialogVisible: false,
      disableSubmit: false,
      resetText: '取消',
      category: {
        pid: 0,
        title: ''
      },
      rulesTtitle: [
        { required: true, message: '分类名称必须填写', trigger: ['blur', 'change'] },
        {
          pattern: /^.{2,30}$/,
          message: '分类名称为2-30个字符',
          trigger: ['blur', 'change']
        }
      ],
      itemId: 0,
      visible: false,
      sortValue: 1 // 排序值
    }
  },
  methods: {
    createGroup: function() {
      this.dialogVisible = true
    },
    onSubmit: function() {
      this.$refs['category'].validate((valid) => {
        if (valid) {
          this.disableSubmit = true
          var method = 'POST'
          var uri = '/admin/site/navi/bottom/group/create'
          if (this.category.id) {
            method = 'PUT'
            uri = '/admin/site/navi/bottom/group/' + this.category.id + '/edit'
          }
          this.$http.send(
            method,
            uri,
            this.category,
            (response) => {
              this.$message.success(response.msg, (_) => {
                this.reload()
              })
            },
            (error) => {
              this.disableSubmit = false
              this.$message.error(error.msg)
            },
            false
          )
        }
      })
    },
    resetForm: function() {
      this.dialogVisible = false
    },
    // 加载导航列表
    loadChild: function(row, treeNode, resolve) {
      this.$http.get(
        '/admin/site/navi/bottom/' + row.id + '/children',
        {},
        ({ data }) => {
          resolve(data)
        },
        (response) => {
          resolve([])
          this.$message.error(response.msg)
        },
        false
      )
    },
    create: function({ row }) {
      this.$router.push({ path: '/site/navi/bottom/' + row.id + '/create' })
    },
    edit: function({ row }) {
      if (row.pid == 0) {
        this.category = {
          id: row.id,
          title: row.title
        }
        this.dialogVisible = true
      } else {
        this.$router.push({ path: '/site/navi/bottom/' + row.id + '/edit' })
      }
    },
    delete: function({ row }) {
      this.$box
        .confirm('此操作将无法恢复，确认删除吗')
        .then(() => {
          this.$http.delete(
            '/admin/site/navi/bottom/' + row.id + '/delete',
            {},
            (response) => {
              this.$message.success(response.msg, (_) => {
                this.reload()
              })
            },
            (error) => {
              this.$message.error(error.msg)
            }
          )
        })
        .catch(() => {})
    },
    // 排序弹出层
    sortPopover({ row }) {
      this.visible = true;
      this.itemId = row.id
      this.sortValue = row.sort
    },
    // 保存
    onSubmitSort() {
      this.disableSubmit = true;
      this.$http.put('/admin/site/navi/bottom/' + this.itemId + '/sort', {
        sort: this.sortValue
      }, ({ msg }) => {
        this.$message.success(msg);
        this.disableSubmit = false;
        this.visible = false;
        this.reload();
      }, ({ msg }) => {
        this.$message.error(msg)
        this.disableSubmit = false;
      }, false)
    }
  }
}
</script>
